<template>
  <div class="scroll-bar">
    <!-- 减去标题栏调度、工作台高度、tab 高度、tab 上 15px 内边距、以及 2px 的边框 -->
    <el-scrollbar height="calc(100vh - 36px - 66px - 39px - 17px)">
      <template v-for="(item, index) in slotNameList" :key="index">
        <div class="form">
          <slot :name="item" />
        </div>
        <!-- 最后一项没有分割线 -->
        <el-divider v-if="index !== slotNameList.length - 1" />
      </template>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
// 插槽列表
interface IProps {
  slotNameList: string[]
}

withDefaults(defineProps<IProps>(), {
  slotNameList: () => ['part1']
})
</script>

<style lang="less" scoped>
.scroll-bar {
  .form {
    padding: 0 15px;
  }
}
</style>
